<template>
    <div>
        <el-card>
            <el-page-header content="产品列表" icon="" title="产品管理" />
            <el-table :data="tableData" style="width: 100%;height: 100%;">

                <el-table-column prop="title" label="产品名称" width="180" />
                <el-table-column prop="introduction" label="简要描述" width="180" />
                <el-table-column prop="editTime" label="更新时间">
                    <template #default="scope">
                        {{ formatTime.getTime(scope.row.editTime) }}
                    </template>
                </el-table-column>


                <el-table-column prop="" label="操作">
                    <template #default="scope">
                        <el-button circle :icon="Edit" size="small" @click="handleEdit(scope.row)"></el-button>
                        <el-popconfirm title="你确定要删除么?" confirm-button-text="是" cancel-button-text="否"
                            @confirm="handleDelete(scope.row)">
                            <template #reference>
                                <el-button circle size="small" :icon="Delete" type="danger"></el-button>
                            </template>
                        </el-popconfirm>
                    </template>
                </el-table-column>
            </el-table>
        </el-card>
    </div>
</template>


<script setup>
import axios from 'axios';
import { ref, onMounted } from 'vue';
import formatTime from '@/util/formatTime'
import { Edit, Delete } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus';
import { useRouter } from 'vue-router';
const router = useRouter()
const tableData = ref([])

onMounted(() => {
    getTableData()
})

const getTableData = async () => {
    const res = await axios.get('/adminapi/product/list')
    console.log(res.data.data)
    tableData.value = res.data.data
}


const handleEdit = async (item) => {
    // console.log(item)

    router.push(`/product-manage/editproduct/${item._id}`)
}

const handleDelete = async (item) => {
    console.log(item)
    const res = await axios.delete(`/adminapi/product/list/${item._id}`)
    console.log(res)
    if (res.data.ActionType == 'ok') {
        ElMessage.success('删除成功')
    }

    await getTableData()
}

</script>

<style lang="scss" scoped>
.el-table {
    margin-top: 50px;
}

::v-deep .htmlContent {
    img {
        max-width: 100%;
    }
}
</style>